<template>
	<view class="content">
		<view v-for="(item,index) in detailsList">
			<view v-if="index==0">
				<view class="details-top">
					<text v-if="num" :class="item.sj_sex==1?'ns-sex sex-box':'nan-sex sex-box'">{{num}}</text>
					<text v-else :class="item.sj_sex==1?'ns-sex sex-box':'nan-sex sex-box'">{{item.sj_sex==1?'女':'男'}}</text>
					<text>{{item.sj_sname}}</text>
				</view>
				<view class="img-box">
					<text>建档照片</text>
					<image :src="item.p0" mode="widthFix"></image>
				</view>
				<text>测试项目</text>
			</view>
			<view>
				<view :class="item.sj_dfjb=='不及格'?'score-bjg details-box':'score-jg details-box'">
					<view class="chengji">
						<view class="flex-box">
							<image :src="'/static/images/item'+item.sj_tcxmid+'.png'" mode="widthFix"></image>
							<text>{{item.xmName}}</text>
						</view>
						<text>{{item.sj_dfjb}}</text>
					</view>
					<view class="chengji">
						<text>{{item.sj_dfsz}}{{item.sj_unit}}</text>
						<text>{{item.sj_fs}}分</text>
					</view>
				</view>
				
				<view class="img-list">
					<image v-for="(img,index) in item.imgs" :src="img" mode="widthFix" @click="previewSingle(index,item.imgs)"></image>
					<!-- <image :src="item.p2" mode="widthFix" @click="previewSingle(item.p2)"></image> -->
					<!-- <image :src="item.p3" mode="widthFix" @click="previewSingle(item.p3)"></image> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detailsList:[],
				num:''
			}
		},
		onLoad(options) {
			this.num = options.num || ''
			this.getData(options.id,options.qId)
		},
		onShow() {

		},
		methods: {
			previewSingle(index,url) {
			    uni.previewImage({
					current: index,      // 当前点击图片索引
					urls: url,  // 所有图片数组
					indicator: 'number', // 显示数字指示器
					loop: true         
			    });
			},
			async getData(id,qId) {
				let quid = qId.split(',')
				console.log(quid)
				uni.showLoading({
					title: '加载中'
				});
				let typeData = []
				let res1 = await this.http("get","/tc/project/list",{pageNum:1,pageSize:100})
				if(res1.code==200){
					typeData = res1.rows
				}
				let listData = []
				const fetchDataSequentially = async () => {
				  listData = [];
				  for (const obj of quid) {
				    const res = await this.http("post", "/tc/tcOperate/getStudentScore", {
				      studentid: id,
				      queuestudentid: obj
				    });
				    if (res.code === 200) {
						console.log(res.data)
						res.data.forEach(item => {
							item.xmName = typeData.find(itemm => itemm.id === item.sj_tcxmid)?.xmMc;
							item.imgs = [item.p1,item.p2,item.p3]
						});
						listData.push(...res.data);
				    }
				  }
				};
				fetchDataSequentially();
				uni.hideLoading();
				this.detailsList = listData
			}
		}
	}
</script>

<style lang="less">
	.details-top{
		width: 100%;
		display: flex;
		border-radius: 8upx;
		background: #F0F7FA;
		padding: 20upx;
		box-sizing: border-box;
		.sex-box{
			width: 40upx;
			height: 40upx;
			border-radius: 50%;
			display: block;
			margin-right: 10upx;
			text-align: center;
			line-height: 40upx;
			font-size: 24upx;
		}
		.ns-sex{
			background-color: #F9CBDE;
		}
		.nan-sex{
			background-color: #C4DCF6;
		}
	}
	.score-jg{
		background: linear-gradient(180deg, #93C3F7 0%, #54A0EF 100%);
	}
	.score-bjg{
		background: linear-gradient(180deg, #F7C393 0%, #EF7B54 100%);
	}
	.details-box{
		width: 100%;
		padding: 10upx 20upx;
		box-sizing: border-box;
		border-radius: 12upx;
		margin: 20upx 0;
		text{
			color: #fff;
			font-size: 28upx;
		}
	}
	.flex-box{
		display: flex;
		align-items: center;
	}
	.chengji{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 10upx 0;
		image{
			width: 40upx;
			height: auto;
			filter: brightness(0%) invert(100%) !important;
			-webkit-filter: brightness(0%) invert(100%) !important;
			display: block;
			margin-right: 10upx;
		}
	}
	.img-box{
		width: 100%;
		margin-top: 20upx;
		image{
			width: 100%;
			height: auto;
			display: block;
			margin: 10upx 0 20upx 0;
			border-radius: 10upx;
		}
	}
	.img-list{
		width: 100%;
		display: flex;
		// justify-content: space-between;
		flex-wrap: wrap;
		margin-top: 10upx;
		image{
			width: 32%;
			height: auto;
			margin-right: 2%;
			margin-bottom: 10upx;
			border-radius: 10upx;
			&:nth-of-type(3n){
				margin-right: 0;
			}
		}
	}
</style>